<template>

  <el-dialog :title="form.user_id ? '编辑学员' : '新增学员'" style="width: 582px;" modal-class="dialog-add"
    v-model="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false">
    <!--form表单-->
    <el-form size="small" :inline="true" ref="form" :label-width="formLabelWidth" :model="form" :rules="formRules">
      <el-form-item label="名称" prop="userName">
        <el-input style="width: 181px;" v-model="form.userName" maxlength="10" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input style="width: 181px;" v-model="form.mobile" maxlength="11" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="职业" prop="career_id">
        <el-select size="small" style="width: 181px;" ref="career_id" @change="careerChange" v-model="form.career_id"
          placeholder="请选择">
          <el-option v-for="(item, index) in positionList" :key="index" :label="item.title"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="级别" prop="level_id">
        <el-select size="small" style="width: 181px;" ref="level_id" @change="levelChange" v-model="form.level_id"
          placeholder="请选择">
          <el-option v-for="(item, index) in levelList" :key="index" :label="item.title" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向" prop="direction_id">
        <el-select size="small" style="width: 181px;" ref="direction_id" v-model="form.direction_id" placeholder="请选择">
          <el-option v-for="(item, index) in directionList" :key="index" :label="item.title"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="is_delete">
        <el-radio-group size="mini" v-model="form.is_delete">
          <el-radio :label="0" size="mini">开启</el-radio>
          <el-radio :label="1" size="mini">关闭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="鉴定站" prop="appraisal_id">
        <el-select size="small" style="width: 181px;" ref="appraisal_id" v-model="form.appraisal_id" placeholder="请选择">
          <el-option v-for="(item, index) in appraisalList" :key="index" :label="item.appraisal"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="notes">
        <el-input style="width: 450px;" v-model="form.notes" maxlength="500" placeholder="请输入" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="onSubmit" :loading="loading">保存</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import PositionApi from '@/api/position.js';
import StudentApi from '@/api/student.js';
import { isPhone } from "@/utils/validate.js";
export default {
  data() {
    return {
      /*左边长度*/
      formLabelWidth: '70px',
      /*是否显示*/
      loading: false,
      /*是否显示*/
      dialogVisible: true,
      // 列表数据
      positionList: [],
      levelList: [],
      directionList: [],
      appraisalList: [],
      /*form表单对象*/
      form: {
        userName: '',
        mobile: '',
        user_id: '',
        career_id: '',
        level_id: '',
        direction_id: '',
        is_delete: 0,
        appraisal_id: '',
        notes: ''
      },
      /*form验证*/
      formRules: {
        userName: [
          {
            required: true,
            message: ' ',
            trigger: 'blur'
          },
        ],
        mobile: [
          {
            required: true,
            message: ' ',
            trigger: 'blur'
          },
          {
            required: true,
            trigger: "blur",
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入手机号"));
              } else if (!isPhone(value)) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
          },
        ],
        career_id: [
          {
            required: true,
            message: ' ',
            trigger: 'change'
          },
        ],
        level_id: [
          {
            required: true,
            message: ' ',
            trigger: 'change'
          },
        ],
        direction_id: [
          {
            required: true,
            message: ' ',
            trigger: 'change'
          },
        ],
        is_delete: [
          {
            required: true,
            message: ' ',
            trigger: 'change'
          },
        ],
        appraisal_id: [
          {
            required: true,
            message: ' ',
            trigger: 'change'
          },
        ],
      }
    };
  },
  props: ['title'],
  watch: {
    title: function () {
      this.$nextTick(() => {
        this.form.title = this.title;
      })
    },
  },
  created() {
    this.getPositionAll()
  },
  methods: {
    changeStatus(val) {
      console.log(val)
      this.form.is_delete = val;
    },
    setTitle({ title, id, data }) {
      this.form.title = title;
      this.form.user_id = id;
      this.form.userName = data.userName;
      this.form.mobile = data.mobile;
      this.form.career_id = data.career_id;
      this.form.level_id = data.level_id;
      this.form.direction_id = data.direction_id;
      this.form.is_delete = data.is_delete;
      this.form.appraisal_id = data.appraisal_id;
      this.form.notes = data.notes;
      this.getPositionAll()
      this.getLevelAll()
      this.getDirectionAll()
      this.getAppraisalAll()
    },
    getPositionAll() {
      PositionApi.getNestedData({}, true)
        .then(res => {
          this.positionList = res.data;
        })
        .catch(error => { });
    },
    careerChange() {
      this.form.level_id = ''
      this.levelList = []
      this.form.level_title = ''
      this.getLevelAll()
      this.form.direction_id = ''
      this.directionList = []
      this.form.direction_title = ''
      this.form.appraisal_id = ''
      this.appraisalList = []
      this.form.appraisal_title = ''
      this.getAppraisalAll()
    },
    getLevelAll() {
      PositionApi.getCareerLevel({
        career_id: this.form.career_id
      }, true)
        .then(data => {
          this.levelList = data.data;
        })
        .catch(error => { });
    },
    levelChange() {
      this.form.direction_id = ''
      this.directionList = []
      this.form.direction_title = ''
      this.getDirectionAll()
    },
    getDirectionAll() {
      PositionApi.getCareerDirection({
        career_id: this.form.career_id,
        level_id: this.form.level_id
      }, true)
        .then(data => {
          this.directionList = data.data;
        })
        .catch(error => { });
    },
    getAppraisalAll() {
      PositionApi.getCareerAppraisal({
        career_id: this.form.career_id,
      }, true)
        .then(data => {
          this.appraisalList = data.data;
        })
        .catch(error => { });
    },
    /*添加*/
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let self = this;
          self.loading = true;
          let params = self.form;
          let key = 'addUser'
          let msg = '新增成功'
          if (self.form.user_id) {
            key = 'updateUser'
            msg = '编辑成功'
          }
          params.career_title = this.$refs.career_id.selectedLabel
          params.level_title = this.$refs.level_id.selectedLabel
          params.direction_title = this.$refs.direction_id.selectedLabel
          params.appraisal_title = this.$refs.appraisal_id.selectedLabel
          StudentApi[key](params, true)
            .then(data => {
              self.loading = false;
              ElMessage({
                message: msg,
                type: 'success'
              });
              self.dialogFormVisible(true);
            })
            .catch(error => {
              self.loading = false;
            });
        }
      });
    },

    /*关闭弹窗*/
    dialogFormVisible(e) {
      if (e) {
        this.$emit('close', {
          type: 'success',
          openDialog: false
        });
      } else {
        this.$emit('close', {
          type: 'error',
          openDialog: false
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-right: 20px;
}
</style>